<template>
	<div>
		<div :class="!isSearch ? 'publicformview-new' : 'publicformview-new-gaoji'">
			<el-form label-width="140px" :inline="true" :model="listQuery" size="mini" ref="searchForm">
				<div :class="!isSearch ? 'publicformview-new-left' : 'publicformview-new-left-gaoji'">
					<el-form-item label="管片：" prop="BlockGroup">
						<el-select clearable v-model="listQuery.BlockGroup" @change='gpChange'>
							<div v-for="(item,index) in gpList" :key="index">

								<el-option :label="item.groupnew" :value="item.groupnew" :key="index"></el-option>
							</div>
						</el-select>
					</el-form-item>
					<el-form-item label="所号：" prop="BlockNo">
						<el-input v-model="listQuery.BlockNo"></el-input>
					</el-form-item>

					<el-form-item label="管理形式：" prop="ManageWay">
						<el-select clearable v-model="listQuery.ManageWay" placeholder="全部" style="width: 100%">
							<el-option label="正常" value="正常"></el-option>
							<el-option label="新纳入" value="新纳入"></el-option>
							<el-option label="托管房屋" value="托管房屋"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="产别：" prop="OwnWay">
						<el-select clearable v-model="listQuery.OwnWay" placeholder="全部" style="width: 100%">
							<el-option label="公产" value="公产"></el-option>
							<el-option label="代管产" value="代管产"></el-option>
							<el-option label="经营产" value="经营产"></el-option>
							<el-option label="托管产" value="托管产"></el-option>
							<el-option label="教会产" value="教会产"></el-option>
							<el-option label="国有自营产" value="国有自营产"></el-option>
							<el-option label="股份企业产" value="股份企业产"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="地级(住)：" prop="AddressLevelLiving" label-width="140px">
						<el-select clearable v-model="listQuery.AddressLevelLiving">
							<el-option label="一级" value="一级" key="1"></el-option>
							<el-option label="二级" value="二级" key="2"></el-option>
							<el-option label="三级" value="三级" key="3"></el-option>
							<el-option label="四级" value="四级" key="4"></el-option>
							<el-option label="五级" value="五级" key="5"></el-option>
							<el-option label="*" value="*" key="6"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="地级(非)：" prop="AddressLevelNonLiving" label-width="140px">
						<el-select clearable v-model="listQuery.AddressLevelNonLiving">
							<el-option label="甲级" value="甲级" key="1"></el-option>
							<el-option label="乙级" value="乙级" key="2"></el-option>
							<el-option label="丙级" value="丙级" key="3"></el-option>
							<el-option label="丁级" value="丁级" key="4"></el-option>
							<el-option label="茂级" value="茂级" key="5"></el-option>
							<el-option label="特级" value="特级" key="6"></el-option>
							<el-option label="*" value="*" key="7"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="建筑形式：" prop="BuildingForm" label-width="140px">
						<el-select clearable v-model="listQuery.BuildingForm">
							<el-option label="楼房" value="楼房" key="1"></el-option>
							<el-option label="平房" value="平房" key="0"></el-option>
						</el-select>
					</el-form-item>

				</div>
			</el-form>
			<div div :class="!isSearch ? 'publicformview-new-right' : 'publicformview-new-right-gaoji'">
				<el-button size="mini" type="primary" @click="handleSearch">查询</el-button>
				<el-button size="mini" @click="resetForm('searchForm')">重置</el-button>
				<el-button size="mini" type="primary" @click="isSearch = !isSearch">{{!isSearch?'高级搜索':'关闭搜索'}}</el-button>
			</div>
		</div>
		<div class="publicpageview" id="publicpageview">
			<div class="tops">产别：</div>
			<div class="tops" style="margin-top: 20px;">合同编号：</div>
			<div class="title">天津市公有住房租赁合同</div>
			<div class="contentText">
				<div class="biaoti">出租人:《以下简称里方)</div>
				<div class="xiahuaxian"></div>
			</div>
			<div class="contentText" style="margin-top: 5px;">
				<div class="biaoti">承租人:(以下简称乙方)</div>
				<div class="xiahuaxian"></div>
			</div>
			<div class="contentText" style="margin-top: 5px;">
				<div class="biaoti">承租人身份证号码:</div>
				<div class="xiahuaxian" style="width: 380px;"></div>
			</div>
			<div style="text-indent: 2em;margin-top: 5px;">
				为保护租赁双方的合法权益，根据国家及我市的有关规定双胲筜桐銜汶公有住房租赁事宜达成协议如下;
			</div>
			<div style="text-indent: 2em;margin-top: 5px;font-weight: bold;">
				一、住房基本情况
			</div>
			<div class="contentText" style="margin-top: 5px;flex-wrap: wrap;">
				<div class="biaoti" style="text-indent: 2em;">甲方将坐落于</div>
				<div class="xiahuaxian" style="width: 100px;"></div>
				<div class="biaoti">区(县)</div>
				<div class="xiahuaxian" style="width: 180px;"></div>
				<div class="biaoti">号</div>
				<div class="xiahuaxian" style="width: 100px;"></div>
				<div class="biaoti">(楼、平房)计租面积(独用)</div>
				<div class="xiahuaxian" style="width: 100px;"></div>
				<div class="biaoti">平方米(伙用)</div>
				<div class="xiahuaxian" style="width: 100px;"></div>
				<div class="biaoti">平方米,出租给乙方作为住房使用(住房使用情况见附件1)。</div>
			</div>

			<div style="text-indent: 2em;margin-top: 5px;font-weight: bold;">
				二、租赁期限
			</div>
			<div class="contentText" style="margin-top: 5px;flex-wrap: wrap;">
				<div class="biaoti" style="text-indent: 2em;">自</div>
				<div class="xiahuaxian" style="width: 50px;"></div>
				<div class="biaoti">年</div>
				<div class="xiahuaxian" style="width: 50px;"></div>
				<div class="biaoti">月</div>
				<div class="xiahuaxian" style="width: 50px;"></div>
				<div class="biaoti">日至</div>
				<div class="xiahuaxian" style="width: 50px;"></div>
				<div class="biaoti">年</div>
				<div class="xiahuaxian" style="width: 50px;"></div>
				<div class="biaoti">月</div>
				<div class="xiahuaxian" style="width: 50px;"></div>
				<div class="biaoti">日</div>
				<div style="text-indent: 2em;margin-top: 5px;">
					合同期满双方同意续签本合同的，填写在《房租赁合同线签记录》(附件2)中，双方签字或者盖章生效。
				</div>
			</div>
			<div style="text-indent: 2em;margin-top: 5px;font-weight: bold;">
				三、租金
			</div>
			<div class="contentText" style="margin-top: 5px;flex-wrap: wrap;">
				<div class="biaoti" style="text-indent: 2em;">(一)每月租金额为人民币(大写)</div>
				<div class="xiahuaxian" style="width: 240px;"></div>

				<div class="biaoti">(￥</div>
				<div class="xiahuaxian" style="width: 150px;margin-left: 0;"></div>
				<div class="biaoti">日)迁住房时，经另行安置后，租凭关系即行终止。</div>
				<div class="biaoti" style="text-indent: 2em;">(二)因不可抗力造成住房及其附属设备损坏或者财产损失的，双方互不承担责任。</div>
			</div>
			<div style="text-indent: 2em;margin-top: 5px;font-weight: bold;">
				七、其他
			</div>
			<div class="contentText" style="margin-top: 5px;flex-wrap: wrap;">
				<div class="biaoti" style="text-indent: 2em;">(一)本合一式两份，经方当事人签字或盖章后生效</div>
				<div class="biaoti" style="text-indent: 2em;">(二)本合同签订后不得随意涂改，本合同 所有附件与合同条款具有等同效力</div>
				<div class="biaoti" style="text-indent: 2em;">(三)本合同遗失的，乙方应当向甲方申请补办，并在本市主要报纸刊登遗失声明，声明满一个月无人提出异议的，甲方予以补办</div>
				<div class="biaoti" style="text-indent: 2em;">(四)本合同在履行过程中发生争议时，由双方协商解决，协商不成的，按本条第</div>
				<div class="xiahuaxian" style="width: 50px;margin-left: 0;"></div>
				<div class="biaoti">项约定的方式解决</div>
			</div>
			<div class="biaoti" style="text-indent: 2em;margin-top: 5px;">1、提交仲裁委员会仲裁:</div>
			<div class="biaoti" style="text-indent: 2em;">2、依法向人民法院起诉</div>
			<div class="biaoti" style="text-indent: 2em;">附件:1、《租用住房基本情况》</div>
			<div class="biaoti" style="text-indent: 4em;">2、《住房租赁合同续签记录》</div>
			<div class="biaoti" style="text-indent: 4em;">3、《住房租金变动情况》</div>
			<div class="biaoti" style="text-indent: 4em;">4、《住房装修设备明细》</div>
			
			<div class="contentText" style="margin-top: 5px;flex-wrap: wrap;justify-content: space-between;padding: 0 50px;">
				<div class="biaoti">甲方(签章)</div>
				<div class="biaoti">乙方(签章)</div>
			</div>
			
			
			<div class="contentText" style="margin-top: 5px;flex-wrap: wrap;justify-content: space-between;padding: 0 20px;">
				<div style="display:flex">
					<div class="xiahuaxian2" style="width: 50px;"></div>
					<div class="biaoti">年</div>
					<div class="xiahuaxian2" style="width: 50px;"></div>
					<div class="biaoti">月</div>
					<div class="xiahuaxian2" style="width: 50px;"></div>
					<div class="biaoti">日</div>
				</div>
				<div style="display:flex">
					<div class="xiahuaxian2" style="width: 50px;"></div>
					<div class="biaoti">年</div>
					<div class="xiahuaxian2" style="width: 50px;"></div>
					<div class="biaoti">月</div>
					<div class="xiahuaxian2" style="width: 50px;"></div>
					<div class="biaoti">日</div>
				</div>
			</div>
		</div>

		<button style="margin: 10px auto 0;display: block;" v-print="printObj">打印公有住房租赁合同</button>
		<div id="loading" v-show="printLoading"></div>
	</div>
</template>

<script>
	import {
		listContract,
		createContract,
		submitContract,
		faFangContract,
		deleteContractById,
		authContract,
		updateContract,
	} from "@/api/management";
	import {
		getArea,
		getHouseAdmin,
		blockGroupList,
		blockList
	} from '@/api/industry'
	import {
		Message
	} from "element-ui";
	import moment from "moment";

	export default {
		name: "AccommodationManagementIndex",

		data() {
			return {
				printLoading: true,
				printObj: {
					id: "publicpageview",
					popTitle: '打印预览',
					extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css",
					beforeOpenCallback(vue) {
						console.log('打开之前')
					},
					openCallback(vue) {
						console.log('执行了打印')
					},
					closeCallback(vue) {
						console.log('关闭了打印工具')
					}
				},
				// 管片列表
				gpList: [],
				isSearch: false,
				listQuery: {
					BlockGroup: '',
					BlockNo: '',
					ManageWay: '',
					OwnWay: '',
					AddressLevelLiving: '',
					AddressLevelNonLiving: ''
				}
			};
		},

		computed: {},

		mounted() {
			this.blockGroupList()
		},

		methods: {
			// 管片列表
			blockGroupList() {
				let data = {
					pageNum: 1,
					pageSize: 9999999
				}
				this.listLoading = true
				blockGroupList(data).then((res) => {
					this.gpList = res.data.list
					this.listLoading = false
				})
			},
			//管片
			gpChange(e) {
				this.listQuery.BlockGroup = e
			},
			handleSearch() {

			}
		},
	};
</script>
<style scoped>
	.publicpageview {
		width: 600px;
		height: auto;
		background-color: #fff;
		margin: 20px auto 0;
		overflow: hidden;
		box-sizing: border-box;
		padding: 20px;
	}

	.tops {
		margin-top: 10px;
		margin-left: 350px;
	}

	.title {
		text-align: center;
		margin-top: 30px;
		font-weight: bold;
		font-size: 18px
	}

	.contentText {
		display: flex;
		align-items: center;
		/* height: 25px; */
		line-height: 25px;
	}

	.xiahuaxian {
		width: 350px;
		height: 25px;
		border-bottom: 1px solid black;
		margin-left: 10px;
	}
	.xiahuaxian2 {
		width: 350px;
		height: 25px;
		/* border-bottom: 1px solid black; */
		margin-left: 10px;
	}
</style>